<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学生通行码</title>
	<style type="text/css">
		.card{
			width: 100%;
			border: none;
			margin: none;
			padding: none;
			outline:none;
			background-color: #EFDBD0;
			height: 2400px;
		}
		.head{
			width: 80%;
			position:relative;
			left:6%;
			top: 100px;
			height: 300px;
			background-color: #E2929B;
			color: #000;
			padding: 50px;
			font-size: 40px;
			border-radius: 10px;
			box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
		}

		.content{
			width: 80%;
			position:relative;
			left:6%;
			top: 200px;
			background-color: #FFFFFF;
			color: #000000;
			padding: 40px;
			font-size: 45px;
			border-radius: 10px;
			height: 1600px;
			box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
		}
		.text,.text2{
			position: relative;
			top: -400px;
		}
	</style>
	<script src="/static/js/jquery-3.5.1.min.js"></script>

</head>
<body style="outline:none;border:none;background-color: #EFDBD0;">
<div class="card">
	<div class="head" style="display:none;">
		<p style="font-size:55px;font-weight:bold">请您在校门进出校园时出示此通行码，经工作人员扫码确认后进出校门</p>
	</div>
	<div class="content">
		<div class="text" style="display:none;">
			<img id="mycode" src="/static/code.jpg" style="position:relative;top:420px;" width="780px"/>
			<p id="nowtime" style="position:relative;color:#ED1213;top:430px;font-weight:bold">2021-09-03 17:30:30</p>
			<p style="position:relative;color:#000000;top:440px;font-weight:bold;font-size:55px;" id="p1">出校二维码</p>
			<p style="position:relative;color:#0102F3;top:450px;font-weight:bold">姓名：<span style="color:#000000" id="p2">吴亦凡</span></p>
			<p style="position:relative;color:#0102F3;top:460px;font-weight:bold">学号：<span style="color:#000000" id="p3">2020200815</span></p>
			<p style="position:relative;color:#0102F3;top:470px;font-weight:bold">学院：<span style="color:#000000" id="p4">信息科学与技术学院</span></p>
			<p style="position:relative;color:#0102F3;top:480px;font-weight:bold">校区：<span style="color:#000000" id="p5">东校区</span></p>
			<p style="position:relative;color:#0102F3;top:490px;font-weight:bold">离校日期：<span style="color:#000000" id="p6">2021-09-03</span></p>
		</div>
		<div class="text2">
			<p style="position:relative;color:#000000;top:450px;font-weight:bold;font-size:40px;">
				类型：
				<select name="n1" id="n1" style="height: 50px;font-size: 30px">
					<option value="出校二维码">出校</option>
					<option value="进校二维码">进校</option>
				</select>
			</p>
			<p style="position:relative;color:#0102F3;top:460px;font-weight:bold">姓名：<input type="text" name="n2" id="n2" style="height: 50px;font-size: 40px"/></p>
			<p style="position:relative;color:#0102F3;top:470px;font-weight:bold">学号：<input type="text" name="n3" id="n3" style="height: 50px;font-size: 40px"/></p>
			<p style="position:relative;color:#0102F3;top:480px;font-weight:bold">学院：<input type="text" name="n4" id="n4" style="height: 50px;font-size: 40px"/></p>
			<p style="position:relative;color:#0102F3;top:490px;font-weight:bold">校区：<input type="text" name="n5" id="n5" style="height: 50px;font-size: 40px"/></p>
			<button type="button" id="sub" style="position:relative;color:#000;top:500px;font-weight:bold;width:100%;height: 70px;font-size: 40px">
				生成二维码
			</button>
		</div>
	</div>
</div>
</body>

<script type="text/javascript">
	function generatecode(user){
		$.ajax({
			type: "POST",
			url: "/mycode",
			contentType : 'application/json;charset=UTF-8',
			jsonp: "callback",
			data: JSON.stringify(user),
			dataType: "text",
			success: function(result) {
				console.info(result);
				document.getElementById("mycode").src = result;
				$(".text2").css('display','none');
				$(".text").css('display','block');
				$(".head").css('display','block');
			},
			error: function(data) {
				//alert("请求出错");
				console.info(data);
			}
		});
	}
	function sub(){
		var n1 = encodeURI($('#n1').val());
		var n2 = encodeURI($('#n2').val());
		var n3 = encodeURI($('#n3').val());
		var n4 = encodeURI($('#n4').val());
		var n5 = encodeURI($('#n5').val());
		var date = new Date();
		var month = (date.getMonth()+1)<10?"0"+(date.getMonth()+1):(date.getMonth()+1);
		var day = date.getDate()<10?"0"+date.getDate():date.getDate();
		var n6 = encodeURI(date.getFullYear()+"-"+month+"-"+day);
		$("#p6").html(n6);
		//var url = 'http://xz8090.com:8090/his?n1='+n1+'&n2='+n2+'&n3='+n3+'&n4='+n4+'&n5='+n5+'&n6='+n6;
		var user = {
			'n1':n1,
			'n2':n2,
			'n3':n3,
			'n4':n4,
			'n5':n5,
			'n6':n6
		};
		//var url = 'http://127.0.0.1:8090/his?n1='+n1+'&n2='+n2+'&n3='+n3+'&n4='+n4+'&n5='+n5+'&n6='+n6;
		generatecode(user);
	}

	$('#sub').click(function(){
		$("#p1").html($("#n1").val());
		$("#p2").html($("#n2").val());
		$("#p3").html($("#n3").val());
		$("#p4").html($("#n4").val());
		$("#p5").html($("#n5").val());

		sub();

	});
</script>

<script>
	function run(){
		var time = new Date();//获取系统当前时间
		var year = time.getFullYear();
		var month = time.getMonth()+1;
		var date= time.getDate();//系统时间月份中的日
		var day = time.getDay();//系统时间中的星期值
		var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
		var week = weeks[day];//显示为星期几
		var hour = time.getHours();
		var minutes = time.getMinutes();
		var seconds = time.getSeconds();
		if(month<10){
			month = "0"+month;
		}
		if(date<10){
			date = "0"+date;
		}
		if(hour<10){
			hour = "0"+hour;
		}
		if(minutes<10){
			minutes = "0"+minutes;
		}
		if(seconds<10){
			seconds = "0"+seconds;
		}
		//var newDate = year+"年"+month+"月"+date+"日"+week+hour+":"+minutes+":"+seconds;
		document.getElementById("nowtime").innerHTML = year+"-"+month+"-"+date+" "+hour+":"+minutes+":"+seconds;
		setTimeout('run()',1000);
	}
	run();

</script>
</html>
